<template>
	<view class="bag">
		<view class="bag-oper">
			<image @click="isEdit = !isEdit" mode="aspectFit" class="icon" :src="`${STATIC_URL}/gl.png`" />
			<view @click="isEdit = !isEdit" class="text">
				{{ isEdit ? "完成" : "管理" }}
			</view>
		</view>
		<view class="bag-bd">
			<u-checkbox-group @change="checkboxGroupChange">
				<template v-for="(item, index) in list">
					<bag-item :key="item.data.id" :item="item.data" @numEdit="numEdit">
						<u-checkbox :name="index" shape="circle" active-color="#CD8544" size="32"
							v-model="item.checked"></u-checkbox>
						<!-- <u-number-box
              slot="num"
              min="1"
              v-model="item.data.num"
              @plus="numPlus"
              @minus="numPlus"
              :index="item.data.id"
            ></u-number-box> -->
					</bag-item>
				</template>
			</u-checkbox-group>
		</view>
		<view class="bag-btns">
			<u-checkbox class="radio" v-model="selectAllState" active-color="#CD8544" size="32" shape="circle"
				@change="selectAllEvent">全选</u-checkbox>

			<view class="right">
				<view class="text" v-show="!isEdit"> 合计： ¥ {{ totalPrice }} </view>
				<view class="btn" @click="submit">
					确认{{ isEdit ? "删除" : "下单" }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shoppingCarList,
		shoppingCarDel,
		shoppingCarAdd,
		shoppingCarEdit,
	} from "@/utils/api";
	// import BagItem from "./components/item";
	import {
		mapActions
	} from "vuex";
	export default {
		components: {
			// BagItem,
		},
		computed: {
			// totalPrice() {
			//   let target = this.list.filter((item) => item.checked);
			//   let sum = 0;
			//   target.map((item) => {
			//     sum += Number(item.data.num) * Number(item.data.price);
			//   });
			//   return sum || "-";
			// },
		},
		watch: {
			list: {
				handler: function(newVal) {
					// console.log("123123", this);
					let target = newVal.filter((item) => item.checked);
					let sum = 0;
					target.map((item) => {
						sum += Number(item.data.num) * Number(item.data.price);
					});
					this.totalPrice = sum;
				},
				deep: true,
				immediate: true,
			},
		},
		data() {
			return {
				isEdit: false,
				checkAll: true,
				selectAllState: false,
				cur: 1,
				total: 0,
				list: [],
				totalPrice: "",
			};
		},
		onLoad() {
			// this.initBags();
			console.log(this.isVip);
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.initBags();
			} else {
				this.list = [];
			}
		},
		onReachBottom() {
			if (this.cur < this.total) {
				++this.cur;
				this.initBags();
			}
		},
		methods: {
			...mapActions(["saveGoodsTemporary", "clearGoods", "saveBagsRecord"]),
			initBags() {
				if (uni.getStorageSync("token")) {
					shoppingCarList({
						page: this.cur,
					}).then((resp) => {
						console.log("购物车列表", resp);
						if (resp.code == 200) {
							this.total = resp.data.last_page;
							this.cur == 1 && (this.list = []);
							resp.data.data.map((item) => {
								let target = item;
								if (target.num > target.stock.num) {
									target.num = target.stock.num;
								}
								this.list.push({
									data: target,
									checked: false,
								});
							});
						}
					});
				}
			},
			// 修改购物车商品 数量
			numChange(e, goods_id) {
				console.log(e, goods_id);
				// console.log(e.value)
			},
			numPlus({
				value,
				index
			}) {
				shoppingCarEdit({
					id: index,
					num: value,
				}).then((resp) => {
					console.log("修改商品数量", resp);
					if (resp.code == 0) {}
					return "";
				});
			},
			numEdit({
				id,
				num
			}) {
				console.log(id, num);
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].data.id == id) {
						this.list[i].data.num = num;
					}
				}
			},
			checkboxGroupChange(detail) {
				console.log(detail);
				this.selectAllState = this.list.length == detail.length;
			},
			// 全选事件
			selectAllEvent({
				value
			}) {
				this.list.map((item) => {
					item.checked = value;
				});
			},
			// 删除 或者 下单
			submit() {
				if (this.isEdit) {
					// 删除
					let arr = this.list.filter((item) => item.checked);

					let ids = [];
					arr.map((item) => {
						ids.push(item.data.id);
					});
					shoppingCarDel({
						id: ids,
					}).then((resp) => {
						console.log("购物车", resp);
						if (resp.code == 200) {
							uni.showToast({
								icon: "none",
								title: resp.msg,
								success: () => {
									this.cur = 1;
									this.initBags();
									this.list = [];
								},
							});
						}
					});
				} else {
					// 下单
					let arr = this.list.filter((item) => item.checked);
					console.log("下单的商品", arr);
					if (arr.length > 0) {
						var goodsArr = [];
						var size;
						var ids = [];
						for (let i = 0; i < arr.length; i++) {
							// 记录下单的购物车
							ids.push(arr[i].data.id);
							if (arr[i].data.colour) {
								size = arr[i].data.colour + ";" + arr[i].data.stock;
							} else {
								size = " ";
							}
							goodsArr.push({
								id: arr[i].data.goods_id,
								name: arr[i].data.name,
								cover: arr[i].data.image,
								price: arr[i].data.price,
								original: arr[i].data.original,
								reduce_rmb: arr[i].data.reduce_rmb,
								num: arr[i].data.num,
								stock_id: arr[i].data.stock_id,
								size: size,
								cost: arr[i].data.cost
							});
						}
						console.log("选中的购物车", ids);
						this.saveBagsRecord(ids).then(() => {
							this.clearGoods().then(() => {
								this.saveGoodsTemporary(goodsArr).then(() => {
									uni.navigateTo({
										url: "/pages/orderConfirm/orderConfirm",
									});
								});
							});
						});
					} else {
						uni.showToast({
							icon: "none",
							title: "请选择需要购买的商品",
						});
					}
				}
			},
			// 删除下单成功的购物车
			dropBag() {},
		},
	};
</script>

<style lang="scss" scoped>
	.bag {
		@include wrapper;

		&-oper {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			justify-content: flex-end;

			.icon {
				width: 34rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}
		}

		&-bd {
			margin-bottom: 120rpx;
		}

		&-btns {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			font-size: 30rpx;
			z-index: 2;

			.right {
				display: flex;
				align-items: center;

				.btn {
					width: 170rpx;
					line-height: 60rpx;
					background: #cd8544;
					border-radius: 10rpx;
					text-align: center;
					color: #ffffff;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
